ഫ്രണ്ടെൻഡ് പ്രസന്റേഷൻ എപിഐ ഡിസ്‌പ്ലേ മാനേജ്മെൻ്റ്: ഗ്ലോബൽ ആപ്ലിക്കേഷനുകൾക്കായുള്ള മൾട്ടി-ഡിസ്‌പ്ലേ കോൺഫിഗറേഷൻ

ഇന്നത്തെ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്ന ലോകത്ത്, വെബ് ആപ്ലിക്കേഷനുകൾ ഒരൊറ്റ ബ്രൗസർ വിൻഡോയിൽ ഒതുങ്ങുന്നില്ല. ഫ്രണ്ടെൻഡ് പ്രസന്റേഷൻ എപിഐ, ഡെവലപ്പർമാർക്ക് അവരുടെ ആപ്ലിക്കേഷനുകൾ ഒന്നിലധികം ഡിസ്‌പ്ലേകളിലേക്ക് വ്യാപിപ്പിക്കാനുള്ള ശക്തമായ കഴിവ് നൽകുന്നു, ഇത് മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവങ്ങൾക്ക് ധാരാളം അവസരങ്ങൾ തുറക്കുന്നു. ഈ ഗൈഡ് പ്രസന്റേഷൻ എപിഐയുടെ സങ്കീർണ്ണതകൾ പര്യവേക്ഷണം ചെയ്യും, പ്രത്യേകിച്ചും മൾട്ടി-ഡിസ്‌പ്ലേ കോൺഫിഗറേഷനിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുകയും ആഗോള പ്രേക്ഷകർക്ക് പ്രസക്തമായ പ്രായോഗിക ഉദാഹരണങ്ങൾ നൽകുകയും ചെയ്യും.

പ്രസന്റേഷൻ എപിഐയെക്കുറിച്ച് മനസ്സിലാക്കാം

പ്രസന്റേഷൻ എപിഐ ഒരു വെബ് സ്റ്റാൻഡേർഡാണ്, അത് വെബ് ആപ്ലിക്കേഷനുകളെ പ്രാഥമിക ഡിസ്‌പ്ലേയിൽ നിന്ന് വ്യത്യസ്തമായ ഉള്ളടക്കം കാണിക്കാൻ ഒരു സെക്കൻഡറി ഡിസ്‌പ്ലേ അഥവാ പ്രസന്റേഷൻ സ്ക്രീൻ ഉപയോഗിക്കാൻ പ്രാപ്തമാക്കുന്നു. ഇത് പോലുള്ള സാഹചര്യങ്ങളിൽ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്:

• കോൺഫറൻസ് റൂമുകൾ: ലാപ്ടോപ്പിൽ നിന്ന് പ്രൊജക്ടറിലേക്ക് പ്രസന്റേഷനുകൾ പങ്കിടുന്നു.
• റീട്ടെയിൽ കിയോസ്കുകൾ: ഒരു ഉപയോക്താവ് ഒരു ചെറിയ ടച്ച് സ്ക്രീനുമായി സംവദിക്കുമ്പോൾ ഒരു വലിയ സ്ക്രീനിൽ ഉൽപ്പന്ന വിവരങ്ങൾ പ്രദർശിപ്പിക്കുന്നു.
• ഡിജിറ്റൽ സൈനേജ്: പൊതു ഇടങ്ങളിലെ ഒന്നിലധികം സ്ക്രീനുകളിൽ ഡൈനാമിക് ഉള്ളടക്കം പ്രക്ഷേപണം ചെയ്യുന്നു.
• ഗെയിമിംഗ്: മെച്ചപ്പെട്ട ഇമ്മേർഷനോ അധിക വിവരങ്ങൾ നൽകുന്നതിനോ വേണ്ടി ഗെയിം അനുഭവം ഒരു സെക്കൻഡറി സ്ക്രീനിലേക്ക് വ്യാപിപ്പിക്കുന്നു.
• വിദ്യാഭ്യാസ ക്രമീകരണങ്ങൾ: വിദ്യാർത്ഥികൾ വ്യക്തിഗത ഉപകരണങ്ങളിൽ പ്രവർത്തിക്കുമ്പോൾ ഒരു വലിയ സ്ക്രീനിൽ പഠന സാമഗ്രികൾ പ്രദർശിപ്പിക്കുന്നു.

എപിഐ താഴെ പറയുന്ന പ്രധാന ആശയങ്ങളെ ചുറ്റിപ്പറ്റിയാണ് പ്രവർത്തിക്കുന്നത്:

• PresentationRequest: ഒരു പ്രസന്റേഷൻ സെഷൻ ആരംഭിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു ഒബ്ജക്റ്റ്.
• PresentationConnection: നിയന്ത്രിക്കുന്ന പേജും പ്രസന്റ് ചെയ്യുന്ന പേജും തമ്മിലുള്ള കണക്ഷനെ പ്രതിനിധീകരിക്കുന്ന ഒരു ഒബ്ജക്റ്റ്.
• PresentationReceiver: നിയന്ത്രിക്കുന്ന പേജിൽ നിന്ന് സന്ദേശങ്ങൾ സ്വീകരിക്കുന്ന പ്രസന്റിംഗ് പേജിലെ ഒരു ഒബ്ജക്റ്റ്.

മൾട്ടി-ഡിസ്‌പ്ലേ കോൺഫിഗറേഷൻ സജ്ജമാക്കുന്നു

പ്രസന്റേഷൻ എപിഐ ഉപയോഗിക്കുന്നതിനുള്ള ആദ്യപടി ലഭ്യമായ ഡിസ്‌പ്ലേകൾ കണ്ടെത്തുകയും ഒരു പ്രസന്റേഷൻ സെഷൻ ആരംഭിക്കുകയും ചെയ്യുക എന്നതാണ്. പ്രക്രിയയുടെ ഒരു തകർച്ച ഇതാ:

1. ലഭ്യമായ ഡിസ്‌പ്ലേകൾ കണ്ടെത്തുന്നു

navigator.presentation.getAvailability() എന്ന മെത്തേഡ് ഒരു പ്രോമിസ് നൽകുന്നു, അത് ഒരു PresentationAvailability ഒബ്ജക്റ്റുമായി പരിഹരിക്കുന്നു. ഒരു പ്രസന്റേഷൻ ഡിസ്‌പ്ലേ നിലവിൽ ലഭ്യമാണോ എന്ന് ഈ ഒബ്ജക്റ്റ് സൂചിപ്പിക്കുന്നു.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentation display is available.');
    } else {
      console.log('Presentation display is not available.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentation display became available.');
      } else {
        console.log('Presentation display became unavailable.');
      }
    };
  });

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് ഒരു പ്രസന്റേഷൻ ഡിസ്‌പ്ലേ ലഭ്യമാണോ എന്ന് പരിശോധിക്കുകയും അതിൻ്റെ ലഭ്യതയിലെ മാറ്റങ്ങൾക്കായി ശ്രദ്ധിക്കുകയും ചെയ്യുന്നു. പ്രസന്റേഷൻ ഡിസ്‌പ്ലേകളുടെ ലഭ്യതയിലെ മാറ്റങ്ങളോട് ചലനാത്മകമായി പ്രതികരിക്കുന്നതിന് onchange ഇവന്റ് കൈകാര്യം ചെയ്യേണ്ടത് പ്രധാനമാണ്.

2. ഒരു പ്രസന്റേഷൻ സെഷൻ ആരംഭിക്കുന്നു

ഒരു പ്രസന്റേഷൻ ആരംഭിക്കുന്നതിന്, പ്രസന്റേഷൻ പേജിന്റെ URL നൽകി ഒരു PresentationRequest ഒബ്ജക്റ്റ് ഉണ്ടാക്കുക.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentation started successfully.');
    // Handle the presentation connection
    connection.onmessage = function(event) {
      console.log('Received message:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentation closed.');
    };
    connection.onerror = function(event) {
      console.error('Presentation error:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Failed to start presentation:', error);
  });

            

              
                Copy
              
            
          

ഈ കോഡ് presentation.html സെക്കൻഡറി സ്ക്രീനിൽ പ്രദർശിപ്പിക്കാനുള്ള ഉള്ളടക്കമായി ഉപയോഗിച്ച് ഒരു പ്രസന്റേഷൻ സെഷൻ ആരംഭിക്കുന്നു. തുടർന്ന് ഇത് ഒരു കണക്ഷൻ സ്ഥാപിക്കുകയും സന്ദേശങ്ങൾ, ക്ലോസർ, പിശകുകൾ എന്നിവയ്ക്കായി ഇവന്റ് ലിസണറുകൾ സജ്ജമാക്കുകയും ചെയ്യുന്നു.

3. പ്രസന്റേഷൻ പേജ് (PresentationReceiver)

പ്രസന്റേഷൻ പേജ് നിയന്ത്രിക്കുന്ന പേജിൽ നിന്ന് സന്ദേശങ്ങൾ സ്വീകരിക്കാൻ തയ്യാറായിരിക്കണം. ഇത് PresentationReceiver ഒബ്ജക്റ്റ് ഉപയോഗിച്ച് നേടാനാകും.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Received connection:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('New connection available:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് പ്രസന്റേഷൻ റിസീവർ പേജിൽ വരുന്ന കണക്ഷനുകൾക്കായി ശ്രദ്ധിക്കുകയും, നിയന്ത്രിക്കുന്ന പേജിൽ നിന്ന് ലഭിക്കുന്ന സന്ദേശങ്ങൾ കൈകാര്യം ചെയ്യുകയും, അതനുസരിച്ച് പ്രസന്റേഷൻ ഡിസ്‌പ്ലേയുടെ ഉള്ളടക്കം അപ്‌ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.

അഡ്വാൻസ്ഡ് മൾട്ടി-ഡിസ്‌പ്ലേ കോൺഫിഗറേഷൻ

അടിസ്ഥാന പ്രസന്റേഷൻ പ്രവർത്തനത്തിനപ്പുറം, പ്രസന്റേഷൻ എപിഐ കൂടുതൽ സങ്കീർണ്ണമായ മൾട്ടി-ഡിസ്‌പ്ലേ കോൺഫിഗറേഷനുകൾക്ക് അനുവദിക്കുന്നു. ചില അഡ്വാൻസ്ഡ് ടെക്നിക്കുകൾ ഇതാ:

1. ഒരു പ്രത്യേക ഡിസ്‌പ്ലേ തിരഞ്ഞെടുക്കുന്നു

ലഭ്യമായ ഡിസ്‌പ്ലേകൾ പട്ടികപ്പെടുത്താനും ഒരു പ്രത്യേക ഡിസ്‌പ്ലേ തിരഞ്ഞെടുക്കാനും പ്രസന്റേഷൻ എപിഐ നേരിട്ട് ഒരു വഴി നൽകുന്നില്ല. എന്നിരുന്നാലും, നിങ്ങൾക്ക് URL-കളുടെ ഒരു അറേ ഉപയോഗിച്ച് PresentationRequest കൺസ്ട്രക്റ്റർ ഉപയോഗിക്കാം. തുടർന്ന് യൂസർ ഏജന്റ് ഉപയോക്താവിന് ഒരു ചോയ്‌സ് അവതരിപ്പിക്കും, അത് ഏത് ഡിസ്‌പ്ലേ ഉപയോഗിക്കണമെന്ന് തിരഞ്ഞെടുക്കാൻ അവരെ അനുവദിക്കുന്നു.

2. ഡൈനാമിക് ഉള്ളടക്ക അപ്‌ഡേറ്റുകൾ

PresentationConnection.postMessage() എന്ന മെത്തേഡ് നിയന്ത്രിക്കുന്ന പേജും പ്രസന്റേഷൻ പേജും തമ്മിൽ തത്സമയ ആശയവിനിമയം സാധ്യമാക്കുന്നു. ഉപയോക്തൃ ഇടപെടലുകൾ അല്ലെങ്കിൽ ഡാറ്റാ മാറ്റങ്ങൾ അടിസ്ഥാനമാക്കി പ്രസന്റേഷൻ ഉള്ളടക്കത്തിൽ ഡൈനാമിക് അപ്‌ഡേറ്റുകൾ വരുത്താൻ ഇത് അനുവദിക്കുന്നു.

            
// Sending a message from the controlling page
connection.postMessage('Hello, presentation display!');

// Receiving the message on the presentation page
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

ഈ ഉദാഹരണം നിയന്ത്രിക്കുന്ന പേജിൽ നിന്ന് പ്രസന്റേഷൻ പേജിലേക്ക് ഒരു ലളിതമായ ടെക്സ്റ്റ് സന്ദേശം അയക്കുന്നത് കാണിക്കുന്നു, അത് പിന്നീട് അതിൻ്റെ ഉള്ളടക്കം അപ്ഡേറ്റ് ചെയ്യുന്നു.

3. വ്യത്യസ്ത ഡിസ്‌പ്ലേ റെസല്യൂഷനുകളും ആസ്പെക്റ്റ് റേഷ്യോകളും കൈകാര്യം ചെയ്യുന്നു

ഒന്നിലധികം ഡിസ്‌പ്ലേകളിൽ ഉള്ളടക്കം അവതരിപ്പിക്കുമ്പോൾ, സ്ക്രീനുകളുടെ വ്യത്യസ്ത റെസല്യൂഷനുകളും ആസ്പെക്റ്റ് റേഷ്യോകളും പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങളുടെ ഉള്ളടക്കം വിവിധ ഡിസ്‌പ്ലേ വലുപ്പങ്ങളുമായി ഭംഗിയായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാൻ CSS മീഡിയ ക്വറികളും ഫ്ലെക്സിബിൾ ലേഔട്ടുകളും ഉപയോഗിക്കുക. സ്ക്രീൻ വലുപ്പത്തിനനുസരിച്ച് ഘടകങ്ങൾ ആനുപാതികമായി സ്കെയിൽ ചെയ്യുന്നതിന് വ്യൂപോർട്ട് യൂണിറ്റുകൾ (vw, vh, vmin, vmax) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

            
/* Example CSS for handling different screen sizes */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

ഈ CSS ഉദാഹരണം ഡിസ്‌പ്ലേയുടെ ആസ്പെക്റ്റ് റേഷ്യോ അടിസ്ഥാനമാക്കി ഒരു ഉള്ളടക്ക ഘടകത്തിന്റെ അളവുകൾ ക്രമീകരിക്കുന്നതിന് മീഡിയ ക്വറികൾ ഉപയോഗിക്കുന്നു.

4. ഇന്റർനാഷണലൈസേഷനും ലോക്കലൈസേഷനും

ആഗോള ആപ്ലിക്കേഷനുകൾക്കായി, ഇന്റർനാഷണലൈസേഷൻ (i18n), ലോക്കലൈസേഷൻ (l10n) എന്നിവ പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങളുടെ HTML-ൽ ഉചിതമായ ഭാഷാ ടാഗുകൾ ഉപയോഗിക്കുക, എല്ലാ ടെക്സ്റ്റ് ഉള്ളടക്കത്തിനും വിവർത്തനങ്ങൾ നൽകുക, ഉപയോക്താവിന്റെ ലൊക്കേൽ അനുസരിച്ച് തീയതികളും അക്കങ്ങളും കറൻസികളും ഫോർമാറ്റ് ചെയ്യുക. ജാവാസ്ക്രിപ്റ്റിലെ ഇന്റർനാഷണലൈസേഷൻ എപിഐ (Intl) ഇതിന് വളരെ സഹായകമാകും.

            
// Formatting a number according to a specific locale
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Output: 1.234.567,89

// Formatting a date according to a specific locale
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Output: 2023/10/27

            

              
                Copy
              
            
          

ഈ ഉദാഹരണങ്ങൾ Intl എപിഐ ഉപയോഗിച്ച് വ്യത്യസ്ത ലൊക്കേലുകൾ അനുസരിച്ച് നമ്പറുകളും തീയതികളും എങ്ങനെ ഫോർമാറ്റ് ചെയ്യാമെന്ന് കാണിക്കുന്നു.

5. പ്രവേശനക്ഷമത പരിഗണനകൾ

നിങ്ങളുടെ മൾട്ടി-ഡിസ്‌പ്ലേ ആപ്ലിക്കേഷനുകൾ വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക. ചിത്രങ്ങൾക്ക് ബദൽ ടെക്സ്റ്റ് നൽകുക, സെമാന്റിക് HTML ഉപയോഗിക്കുക, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഒരു കീബോർഡ് ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. ഡൈനാമിക് ഉള്ളടക്കത്തിന്റെ പ്രവേശനക്ഷമത വർദ്ധിപ്പിക്കുന്നതിന് ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഗ്ലോബൽ ആപ്ലിക്കേഷനുകൾക്കുള്ള പ്രായോഗിക ഉദാഹരണങ്ങൾ

ഗ്ലോബൽ ആപ്ലിക്കേഷനുകളിൽ പ്രസന്റേഷൻ എപിഐ എങ്ങനെ ഉപയോഗിക്കാം എന്നതിൻ്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ ഇതാ:

• അന്താരാഷ്ട്ര കോൺഫറൻസ് പ്രസന്റേഷനുകൾ: അവതാരകർക്ക് അവരുടെ ലാപ്ടോപ്പിൽ സ്പീക്കർ നോട്ടുകൾ കാണുകയും പ്രസന്റേഷൻ നിയന്ത്രിക്കുകയും ചെയ്യുമ്പോൾ പ്രൊജക്ടറിൽ സ്ലൈഡുകൾ പങ്കിടാൻ അനുവദിക്കുന്ന ഒരു വെബ് ആപ്ലിക്കേഷൻ. ആപ്ലിക്കേഷൻ ഒന്നിലധികം ഭാഷകളെ പിന്തുണയ്ക്കുകയും അവതാരകർക്ക് വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി പ്രസന്റേഷൻ ലേഔട്ട് ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുകയും വേണം.
• ഗ്ലോബൽ റീട്ടെയിൽ കിയോസ്കുകൾ: ഉപയോക്താക്കൾക്ക് ഉൽപ്പന്നങ്ങൾ ബ്രൗസ് ചെയ്യാനും ടച്ച് സ്ക്രീനിൽ വാങ്ങലുകൾ നടത്താനും അനുവദിക്കുമ്പോൾ ഒരു വലിയ സ്ക്രീനിൽ ഉൽപ്പന്ന വിവരങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒരു കിയോസ്ക് ആപ്ലിക്കേഷൻ. ആപ്ലിക്കേഷൻ ഒന്നിലധികം കറൻസികൾ, ഭാഷകൾ, പേയ്‌മെന്റ് രീതികൾ എന്നിവയെ പിന്തുണയ്ക്കണം.
• ബഹുഭാഷാ ഡിജിറ്റൽ സൈനേജ്: വാർത്താ തലക്കെട്ടുകൾ, കാലാവസ്ഥാ അപ്‌ഡേറ്റുകൾ, പരസ്യങ്ങൾ തുടങ്ങിയ ഡൈനാമിക് ഉള്ളടക്കം പൊതു ഇടങ്ങളിലെ ഒന്നിലധികം സ്ക്രീനുകളിൽ പ്രദർശിപ്പിക്കുന്ന ഒരു ഡിജിറ്റൽ സൈനേജ് സിസ്റ്റം. ഓരോ ഡിസ്‌പ്ലേയുടെയും പ്രാദേശിക ഭാഷയിലേക്ക് ഉള്ളടക്കം യാന്ത്രികമായി വിവർത്തനം ചെയ്യണം.
• വിദൂര ടീമുകൾക്കുള്ള സഹകരണ വൈറ്റ്ബോർഡിംഗ്: ഭൂമിശാസ്ത്രപരമായി ചിതറിക്കിടക്കുന്ന ടീമുകളെ തത്സമയം സഹകരിക്കാൻ അനുവദിക്കുന്ന ഒരു വെബ് അധിഷ്ഠിത വൈറ്റ്ബോർഡ് ആപ്ലിക്കേഷൻ. ഒരു സെക്കൻഡറി ഡിസ്പ്ലേ ഒരു പ്രത്യേക ഏരിയയുടെ സൂം-ഇൻ കാഴ്ച കാണിക്കുകയോ അധിക റഫറൻസ് മെറ്റീരിയൽ അവതരിപ്പിക്കുകയോ ചെയ്യാം.

കോഡ് ഉദാഹരണം: ഡൈനാമിക് അപ്‌ഡേറ്റുകളുള്ള ഒരു ലളിതമായ പ്രസന്റേഷൻ

ഡൈനാമിക് അപ്‌ഡേറ്റുകളുള്ള ഒരു ലളിതമായ പ്രസന്റേഷൻ കാണിക്കുന്ന ഒരു സമ്പൂർണ്ണ കോഡ് ഉദാഹരണം ഇതാ:

നിയന്ത്രിക്കുന്ന പേജ് (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API Example</title>
</head>
<body>
  <h1>Controlling Page</h1>
  <button id="startButton">Start Presentation</button>
  <input type="text" id="messageInput" placeholder="Enter message">
  <button id="sendMessageButton">Send Message</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Presentation started successfully.');
          connection.onmessage = function(event) {
            console.log('Received message:', event.data);
          };
          connection.onclose = function() {
            console.log('Presentation closed.');
          };
          connection.onerror = function(event) {
            console.error('Presentation error:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Failed to start presentation:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Presentation not started.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

പ്രസന്റേഷൻ പേജ് (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation Display</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Presentation Display</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Received connection:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('New connection available:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

ഈ ഉദാഹരണം പ്രസന്റേഷൻ ആരംഭിക്കുന്നതിനുള്ള ഒരു ബട്ടണും പ്രസന്റേഷൻ ഡിസ്‌പ്ലേയിലേക്ക് സന്ദേശങ്ങൾ അയയ്‌ക്കുന്നതിന് ഒരു ടെക്സ്റ്റ് ഇൻപുട്ടും ബട്ടണും ഉള്ള ഒരു ലളിതമായ നിയന്ത്രണ പേജ് ഉണ്ടാക്കുന്നു. പ്രസന്റേഷൻ ഡിസ്‌പ്ലേ സന്ദേശങ്ങൾ സ്വീകരിക്കുകയും അതനുസരിച്ച് അതിൻ്റെ ഉള്ളടക്കം അപ്‌ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.

സാധാരണ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു

• പ്രസന്റേഷൻ ഡിസ്‌പ്ലേ കണ്ടെത്തിയില്ല: ഓപ്പറേറ്റിംഗ് സിസ്റ്റം ക്രമീകരണങ്ങളിൽ ഒരു സെക്കൻഡറി ഡിസ്‌പ്ലേ കണക്റ്റുചെയ്‌ത് പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ബ്രൗസർ അനുയോജ്യത പരിശോധിച്ച് ഏറ്റവും പുതിയ പതിപ്പിലേക്ക് അപ്‌ഡേറ്റ് ചെയ്യുക.
• പ്രസന്റേഷൻ ആരംഭിക്കുന്നില്ല: പ്രസന്റേഷൻ URL ശരിയാണെന്നും ആക്‌സസ് ചെയ്യാവുന്നതാണെന്നും ഉറപ്പാക്കുക. ജാവാസ്ക്രിപ്റ്റ് കൺസോളിൽ എന്തെങ്കിലും പിശകുകളുണ്ടോയെന്ന് പരിശോധിക്കുക.
• സന്ദേശങ്ങൾ ലഭിക്കുന്നില്ല: PresentationConnection ശരിയായി സ്ഥാപിച്ചിട്ടുണ്ടെന്നും onmessage ഇവന്റ് ലിസണർ നിയന്ത്രിക്കുന്ന പേജിലും പ്രസന്റേഷൻ പേജിലും ശരിയായി കോൺഫിഗർ ചെയ്തിട്ടുണ്ടെന്നും ഉറപ്പാക്കുക.
• ക്രോസ്-ഒറിജിൻ പ്രശ്നങ്ങൾ: നിയന്ത്രിക്കുന്ന പേജും പ്രസന്റേഷൻ പേജും വ്യത്യസ്ത ഡൊമെയ്‌നുകളിൽ ഹോസ്റ്റ് ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, ഒറിജിനുകൾക്കിടയിൽ ആശയവിനിമയം അനുവദിക്കുന്നതിന് CORS (ക്രോസ്-ഒറിജിൻ റിസോഴ്സ് ഷെയറിംഗ്) ശരിയായി കോൺഫിഗർ ചെയ്‌തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

പ്രസന്റേഷൻ എപിഐയുടെ ഭാവി

പ്രസന്റേഷൻ എപിഐ തുടർച്ചയായി വികസിക്കുന്ന ഒരു സാങ്കേതികവിദ്യയാണ്. ഭാവിയിലെ മെച്ചപ്പെടുത്തലുകളിൽ ഇവ ഉൾപ്പെടാം:

• മെച്ചപ്പെട്ട ഡിസ്‌പ്ലേ എണ്ണലും തിരഞ്ഞെടുപ്പും.
• പ്രസന്റേഷൻ ലേഔട്ടിലും സ്റ്റൈലിംഗിലും കൂടുതൽ സങ്കീർണ്ണമായ നിയന്ത്രണം.
• മെച്ചപ്പെടുത്തിയ സുരക്ഷാ സവിശേഷതകൾ.
• ഓഗ്‌മെന്റഡ്, വെർച്വൽ റിയാലിറ്റി അനുഭവങ്ങൾക്കായി WebXR പോലുള്ള മറ്റ് വെബ് എപിഐകളുമായുള്ള സംയോജനം.

ഉപസംഹാരം

ഫ്രണ്ടെൻഡ് പ്രസന്റേഷൻ എപിഐ വെബ് ആപ്ലിക്കേഷനുകളെ ഒന്നിലധികം ഡിസ്‌പ്ലേകളിലേക്ക് വ്യാപിപ്പിക്കുന്നതിന് ശക്തമായ ഒരു സംവിധാനം നൽകുന്നു, ഇത് വൈവിധ്യമാർന്ന നൂതനമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സാധ്യമാക്കുന്നു. എപിഐയുടെ പ്രധാന ആശയങ്ങൾ മനസിലാക്കുകയും ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പിന്തുടരുകയും ചെയ്യുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് ആഗോള പ്രേക്ഷകർക്കായി ആകർഷകവും ഫലപ്രദവുമായ മൾട്ടി-ഡിസ്‌പ്ലേ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. അന്താരാഷ്ട്ര കോൺഫറൻസ് പ്രസന്റേഷനുകൾ മുതൽ ബഹുഭാഷാ ഡിജിറ്റൽ സൈനേജ് വരെ, സാധ്യതകൾ അനന്തമാണ്. പ്രസന്റേഷൻ എപിഐയുടെ ശക്തിയെ സ്വീകരിക്കുകയും മൾട്ടി-ഡിസ്‌പ്ലേ വെബ് ആപ്ലിക്കേഷനുകളുടെ സാധ്യതകൾ തുറക്കുകയും ചെയ്യുക.